<script setup>
import { reactive, computed } from 'vue';

const author = reactive({
    name: 'John Doe',
    books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
    ]
})

const hasPublishedBook = computed(() => {
    return author.books.length > 0
})
</script>

<template>
    <p>{{ author.name }} has published books: {{  hasPublishedBook }}</p>
    <span v-for="n in 10" :key="n">{{ n }}</span>
</template>
